//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Button,
	Modal,
} from 'antd';


const FormItem = Form.Item;
const { Option } = Select;


//查看表单
@Form.create()
class ViewForm extends PureComponent {
	static defaultProps = {
		handleViewModalVisible: () => {},
		values: {},
	};

	constructor(props) {
		super(props);

		this.state = {
			formVals: {
				user_id: props.values.user_id,
				user_name: props.values.user_name,
				user_name_cn: props.values.user_name_cn,
				password: props.values.password,
				enabled: props.values.enabled,
				email: props.values.email,
				phone: props.values.phone,
				dept: props.values.dept,
				dept_id: props.values.dept_id,
				is_system_user: props.values.is_system_user,
				creator_id: props.values.creator_id,
				dept_code: props.values.dept_code,
				inner_dept_code: props.values.inner_dept_code,
				org_code: props.values.org_code,
				org: props.values.org,
				inner_org_code: props.values.inner_org_code,
				memos: props.values.memos,
				avatar: props.values.avatar,
				job: props.values.job,
				createTime: props.values.createTime,
			},
		};

	}

	renderContent = (formVals) => {
		const {
			form
		} = this.props;

return(
	<Form  layout="vertical" hideRequiredMark>



	    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="用户名">
		            {form.getFieldDecorator('user_name', {
		            rules: [{ required: true, message: '请输入至少2个字符的用户名！', min: 2 }],
		            initialValue: formVals.user_name,
		            })(<Input readOnly placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="用户名称">
		            {form.getFieldDecorator('user_name_cn', {
		            rules: [{ required: true, message: '请输入至少2个字符的用户名称！', min: 2 }],
		            initialValue: formVals.user_name_cn,
		            })(<Input readOnly placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
	    </Row>
	    
	        
	    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	    
			<Col  md={12} sm={24}>
		        <FormItem  label="密码">
		            {form.getFieldDecorator('password', {
		            rules: [{ required: true, message: '请输入至少6个字符的密码！', min: 6 }],
		            initialValue: formVals.password,
		            })(<Input readOnly placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
	       	<Col md={12} sm={24}>
		        <FormItem label="状态">
		            {form.getFieldDecorator('enabled',{
		            	initialValue: formVals.enabled,
		            })(
		                <Select placeholder="请选择" style={{ width: '100%' }}>
		                    <Option value="0">不可用</Option>
		                    <Option value="1">可用</Option>
		                </Select>
		            )}
		        </FormItem>
	        </Col>
	        
	              
	    </Row>
	    
	    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="手机号">
		            {form.getFieldDecorator('phone', {
		            rules: [{ required: false, message: '手机号码格式不符！',  pattern:/^1(3|4|5|6|7|8|9)\d{9}$/ }],
		            initialValue: formVals.phone,
		            })(<Input readOnly placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="邮箱">
		            {form.getFieldDecorator('email', {
		            rules: [{ required: false}],
		            initialValue: formVals.email,
		            })(<Input readOnly placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
	    </Row>
	
	   <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	   
	   		<Col md={12} sm={24}>
		        <FormItem label="角色">
		            {form.getFieldDecorator('auth_ids',{
		            	initialValue: formVals.auth_id,
		            })(
		                <Select placeholder="请选择" style={{ width: '100%' }} mode="multiple">
		                	{authForUser != undefined?authForUser.list.map((item,index) => {
		                		return <Option value={item.auth_id}>{item.auth_name}</Option>
		                	}):null}
		                </Select>
		            )}
		        </FormItem>
	        </Col>
			<Col  md={12} sm={24}>
	            <FormItem  label="部门">
	            	{form.getFieldDecorator('dept')(
	                    <SelectDeptTree {...parentDeptTreeMethod} deptValues={formVals.dept}/>
	                )}
	            </FormItem>
	        </Col>
	
	
	    </Row>



    </Form>
	);
};

	render() {
		const {
			viewModalVisible,
			handleViewModalVisible,
			values
		} = this.props;
		const {
			formVals
		} = this.state;

		return(
			<Modal
    width={800}
    height={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisible}
    onCancel={() => handleViewModalVisible(false, values)}
    footer={<Button key="back" onClick = { () => handleViewModalVisible(false, values) }>取消</Button>}
>

    {this.renderContent(values)}
</Modal>
		);
	}

}

export default ViewForm;